<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>个人中心 - 管道巡检App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            -webkit-user-select: none;
            user-select: none;
        }
        .ios-statusbar {
            height: 44px;
            background: linear-gradient(135deg, #000 0%, #333 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e7eb;
            padding: 8px 0 20px 0;
        }
    </style>
</head>
<body class="bg-gray-50 pb-20">
    <!-- iOS状态栏 -->
    <div class="ios-statusbar">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <div class="w-6 h-3 border border-white rounded-sm">
                <div class="w-4 h-1.5 bg-white rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 用户信息区域 -->
    <div class="bg-gradient-to-br from-blue-600 via-blue-500 to-purple-600 px-4 py-8">
        <div class="flex items-center space-x-4">
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face" 
                     alt="用户头像" class="w-20 h-20 rounded-full border-4 border-white/30">
                <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
            </div>
            <div class="flex-1 text-white">
                <h2 class="text-xl font-bold">李巡检员</h2>
                <p class="text-blue-100 text-sm">工号: INS20250001</p>
                <p class="text-blue-200 text-xs">安全巡检员 • 在职</p>
                <div class="flex items-center space-x-4 mt-2">
                    <div class="text-center">
                        <div class="text-lg font-semibold">156</div>
                        <div class="text-xs text-blue-200">巡检次数</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-semibold">97.2%</div>
                        <div class="text-xs text-blue-200">完成率</div>
                    </div>
                    <div class="text-center">
                        <div class="text-lg font-semibold">23</div>
                        <div class="text-xs text-blue-200">发现缺陷</div>
                    </div>
                </div>
            </div>
            <button class="text-white p-2">
                <i class="fas fa-cog text-xl"></i>
            </button>
        </div>
    </div>

    <!-- 快捷功能 -->
    <div class="px-4 -mt-6 relative z-10">
        <div class="bg-white rounded-2xl p-6 shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">快捷功能</h3>
            <div class="grid grid-cols-4 gap-4">
                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-blue-50 transition">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-history text-blue-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">工作记录</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-green-50 transition">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-medal text-green-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">我的成就</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-yellow-50 transition">
                    <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-calendar-check text-yellow-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">考勤打卡</span>
                </button>

                <button class="flex flex-col items-center space-y-2 p-3 rounded-xl hover:bg-purple-50 transition">
                    <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                        <i class="fas fa-graduation-cap text-purple-600 text-xl"></i>
                    </div>
                    <span class="text-xs text-gray-700 font-medium">培训学习</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 本月工作总结 -->
    <div class="px-4 mt-6">
        <div class="bg-white rounded-2xl p-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">本月工作总结</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-blue-50 rounded-xl">
                    <div class="text-2xl font-bold text-blue-600">47</div>
                    <div class="text-sm text-gray-600">巡检任务</div>
                    <div class="text-xs text-green-600 mt-1">↑ 15.2%</div>
                </div>
                <div class="text-center p-4 bg-red-50 rounded-xl">
                    <div class="text-2xl font-bold text-red-600">8</div>
                    <div class="text-sm text-gray-600">发现缺陷</div>
                    <div class="text-xs text-yellow-600 mt-1">↑ 3</div>
                </div>
                <div class="text-center p-4 bg-green-50 rounded-xl">
                    <div class="text-2xl font-bold text-green-600">156</div>
                    <div class="text-sm text-gray-600">巡检公里</div>
                    <div class="text-xs text-green-600 mt-1">↑ 23.6km</div>
                </div>
                <div class="text-center p-4 bg-purple-50 rounded-xl">
                    <div class="text-2xl font-bold text-purple-600">98</div>
                    <div class="text-sm text-gray-600">工作时长</div>
                    <div class="text-xs text-gray-500 mt-1">小时</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能菜单 -->
    <div class="px-4 mt-6">
        <div class="bg-white rounded-2xl shadow-sm divide-y divide-gray-100">
            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-user-edit text-blue-600"></i>
                    </div>
                    <span class="text-gray-800 font-medium">个人信息</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>

            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-shield-alt text-green-600"></i>
                    </div>
                    <span class="text-gray-800 font-medium">安全设置</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>

            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-bell text-yellow-600"></i>
                    </div>
                    <div class="flex-1 flex items-center justify-between">
                        <span class="text-gray-800 font-medium">消息通知</span>
                        <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
                    </div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>

            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-download text-purple-600"></i>
                    </div>
                    <span class="text-gray-800 font-medium">离线数据</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>

            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-question-circle text-gray-600"></i>
                    </div>
                    <span class="text-gray-800 font-medium">帮助中心</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>

            <button class="w-full flex items-center justify-between p-4 hover:bg-gray-50">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-info-circle text-orange-600"></i>
                    </div>
                    <span class="text-gray-800 font-medium">关于应用</span>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </button>
        </div>
    </div>

    <!-- 退出登录 -->
    <div class="px-4 mt-6 mb-6">
        <button class="w-full bg-red-50 text-red-600 py-4 rounded-2xl font-medium border border-red-200">
            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
        </button>
    </div>

    <!-- 版本信息 -->
    <div class="text-center text-gray-400 text-xs pb-4">
        <p>管道巡检系统 v1.0.0</p>
        <p>© 2025 工业管道安全巡检系统</p>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
        <div class="grid grid-cols-4 gap-1">
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-home text-lg mb-1"></i>
                <span class="text-xs">首页</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-clipboard-list text-lg mb-1"></i>
                <span class="text-xs">任务</span>
            </button>
            <button class="flex flex-col items-center py-2 text-gray-400">
                <i class="fas fa-camera text-lg mb-1"></i>
                <span class="text-xs">上报</span>
            </button>
            <button class="flex flex-col items-center py-2 text-blue-600">
                <i class="fas fa-user text-lg mb-1"></i>
                <span class="text-xs">我的</span>
            </button>
        </div>
    </div>
</body>
</html>